<template>
  <el-dialog
      v-model="visible"
      :title="fileInfo.fileName"
      custom-class="file-preview-dialog"
  >
    <div v-loading="loading">
      <div class="content-container">
        <div
            v-if="!supported"
            class="empty"
        >
          <el-empty description="当前文件无法预览" />
        </div>
        <div
            v-else
            class="content"
            ref="preview"
        >
          <div
              v-if="fileInfo.isPicture"
              class="picture"
          >
            <el-image
                id="image"
                :src="picturePath"
                fit="fill"
            />
          </div>
          <div
              v-else
              class="text"
          >
            {{ value }}
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as file from '@/api/file'
import {nextTick} from 'vue'

export default {
    name: 'Preview',
    data() {
        return {
            visible: false,
            fileInfo: {
                fileName: '',
                filePath: '',
                size: 0,
                isPicture: false
            },
            loading: false,
            supported: true,
            value: '',
            currentPage: -1,
            picturePath: ''
        }
    },
    // computed: {
    //     picturePath() {
    //         const userName = localStorage.getItem('userName')
    //         const pictPath = this.fileInfo.filePath.substr(1)
    //         return `https://localhost:5001/api/file/readPict?userName=${userName}&pictPath=${pictPath}`
    //     }
    // },
    methods: {
        async open({file: fileInfo}) {
            if(!this.$store.state.file.isPreviewOpen) {
                this.value = ''
            }
            this.$store.commit('file/setIsPreviewOpen', true)
            this.fileInfo = fileInfo
            this.visible = true
            this.loading = true
            this.supported = true
            this.currentPage = -1
            if(this.fileInfo.size >= 1024*1024) {
                this.currentPage = this.currentPage + 1
            }
            if(this.fileInfo.isPicture) {
                await this.openPic(fileInfo.filePath.substr(1))
                this.loading = false
                return
            }
            try {
                const resp = await file.preViewFile(fileInfo.filePath.substr(1), this.currentPage)
                this.value = this.value + resp.data
                if(this.value.includes('\0')) {
                    this.supported = true
                    return
                } else {
                    await nextTick()
                }
            } catch (e) {
                this.supported = false
            }
            this.loading = false
            this.$store.commit('file/setIsPreviewOpen', false)
        },
        async openPic(filePath) {
            const resp = await file.previewPict(filePath)
            this.picturePath = window.URL.createObjectURL(resp)
        }
    }
}
</script>

<style scoped>
.text{
    white-space:pre-wrap;
}
</style>